<template>
  <view class="uni-list">
    <view class="uni-list-cell">
      <view class="uni-list-cell-db">
        <picker @change="bindPickerChange" :value="index" range-key="label" :range="list">
          <uni-list-item :note="_placeholder" showArrow :title="value" :border="false" :clickable="true" />
        </picker>
      </view>
    </view>
  </view>
</template>

<script>
import {getDict} from '@/api/utils.js'

export default {
  data() {
    return {
      show: false,
      label: '',
      date:'',
      list: [],
      index: 0,
    }
  },
  props: {
    value:{

    },
    defaultValue:{
      default: ''
    },
    placeholder:{
      type:String
    },
    inputBorder:{
      type:Boolean,
      default:true
    },
    dict:{
      type:String
    },
    border:{
      default: true
    },
  },
  model:{
    prop:'value'
  },
  watch:{
    value: {
      immediate: true,    // 这句重要
      handler (val) {
        console.log(val)
      }
    },
    dict: {
      handler (val) {
        this.getDict()
      }
    }
  },
  computed: {
    _placeholder() {
      return this.value ? "" : this.placeholder
    },
  },
  mounted() {
   this.getDict()
  },

  methods: {
    getDict(){
      this.list=[]
      getDict(this.dict).forEach(item => {
        this.list.push({label:item.dictName,value:item.dictName})
      })
    },
    confirm(e) {
      this.label = e[0].label
      this.date = e[0].value
      this.$emit("input", e[0].value);
      this.$emit("change", e[0].value);
    },
    bindPickerChange: function(e) {
      let index=e.detail.value;
      console.log('picker发送选择改变，携带值为', this.list[index])
      this.$emit("change", this.list[index].value);
      this.$emit("input", this.list[index].value);
      this.index = e.detail.value
    },
  },
}
</script>

<style lang="scss" scoped>
.select {
  display: flex;
  font-size: 28 rpx;
  line-height: 1.5em;
  justify-content: space-between;
  max-width: 100%;

  .placeholder {
    color: #C0C4CC;
  }
}
</style>